Validering med JavaScript Proxy Handler: Typesikker Objektintersepsjon

JavaScript Proxies tilbyr en kraftig mekanisme for å avskjære og tilpasse grunnleggende objektoperasjoner. En av de mest overbevisende bruksområdene er datavalidering. Ved å utnytte Proxy-handlere kan du håndheve begrensninger og typesikkerhet på objektegenskaper, noe som fører til mer robust og vedlikeholdsvennlig kode. Dette blogginnlegget utforsker hvordan du bruker JavaScript Proxies for effektiv objektvalidering, og tilbyr praktiske eksempler og veiledning for utviklere på alle nivåer. Vi vil dekke ulike handlermetoder og demonstrere hvordan de kan brukes for å sikre dataintegritet.

Forstå JavaScript Proxies

Før vi dykker inn i validering, la oss kort se på hva JavaScript Proxies er og hvordan de fungerer. Et Proxy-objekt pakker et annet objekt (målet) og avskjærer operasjoner som utføres på det målet. Proxyen lar deg definere tilpasset oppførsel for operasjoner som å hente en egenskap, sette en egenskap, kalle en funksjon eller konstruere et nytt objekt. Denne tilpasningen oppnås gjennom en handler, som er et objekt som inneholder metoder som avskjærer spesifikke operasjoner.

Den grunnleggende syntaksen for å lage en Proxy er:

            const proxy = new Proxy(target, handler);
            

              
                Copy
              
            
          

• target: Objektet som skal pakkes med Proxyen.
• handler: Et objekt som inneholder metoder (feller) som avskjærer operasjoner på målet.

Proxy Handler-metoder for validering

Handler-objektet kan inneholde ulike metoder, som hver korresponderer med en annen operasjon på mål-objektet. Her er noen av de mest relevante metodene for validering:

• get(target, property, receiver): Avskjærer egenskapstilgang.
• set(target, property, value, receiver): Avskjærer egenskapstilordning.
• apply(target, thisArg, argumentsList): Avskjærer funksjonskall.
• construct(target, argumentsList, newTarget): Avskjærer new-operatoren.
• deleteProperty(target, property): Avskjærer delete-operatoren.
• defineProperty(target, property, descriptor): Avskjærer egenskapdefinisjon.
• has(target, property): Avskjærer in-operatoren.
• ownKeys(target): Avskjærer Object.getOwnPropertyNames(), Object.getOwnPropertySymbols(), og Reflect.ownKeys().
• preventExtensions(target): Avskjærer Object.preventExtensions().
• getPrototypeOf(target): Avskjærer Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Avskjærer Object.setPrototypeOf().

Vi vil primært fokusere på get-, set-, apply- og construct-handlerne da de er de mest brukte for valideringsformål.

Validering av egenskapstilordninger med set-handleren

set-handleren er avgjørende for validering av egenskapstilordninger. Den lar deg avskjære forsøk på å endre et objekts egenskaper og håndheve begrensninger før tilordningen faktisk finner sted.

Eksempel: Typesjekking

La oss lage en Proxy som håndhever typesjekking for egenskapene til et Person-objekt. Vi vil sørge for at name alltid er en streng og age alltid er et tall.

            const person = {
  name: 'John Doe',
  age: 30
};

const validator = {
  set: function(target, property, value) {
    if (property === 'name' && typeof value !== 'string') {
      throw new TypeError('Name must be a string');
    }
    if (property === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    // Linjen nedenfor er avgjørende for å sikre at egenskapen faktisk blir satt.
    target[property] = value;
    return true; // Indiker suksess
  }
};

const proxy = new Proxy(person, validator);

proxy.name = 'Jane Smith'; // Fungerer fint
proxy.age = 25; // Fungerer fint

try {
  proxy.age = '40'; // Kaster TypeError
} catch (e) {
  console.error(e);
}

console.log(proxy.age); // Utdata: 25

            

              
                Copy
              
            
          

I dette eksemplet sjekker set-handleren typen av verdien som tilordnes name og age. Hvis typen er feil, kaster den en TypeError, noe som forhindrer tilordningen. Det er viktig å inkludere `target[property] = value;` i handleren for å faktisk sette verdien; ellers vil egenskapen ikke bli oppdatert.

Eksempel: Områdevalidering

Vi kan også validere at en egenskap faller innenfor et spesifikt område. For eksempel, la oss sørge for at age alltid er mellom 0 og 120.

            const person = {
  name: 'John Doe',
  age: 30
};

const validator = {
  set: function(target, property, value) {
    if (property === 'age') {
      if (typeof value !== 'number') {
        throw new TypeError('Age must be a number');
      }
      if (value < 0 || value > 120) {
        throw new RangeError('Age must be between 0 and 120');
      }
    }
    target[property] = value;
    return true;
  }
};

const proxy = new Proxy(person, validator);

proxy.age = 50; // Fungerer fint

try {
  proxy.age = -5; // Kaster RangeError
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

Validering av egenskapstilgang med get-handleren

Selv om det er mindre vanlig for streng validering, kan get-handleren brukes til å utføre transformasjoner eller valideringer når en egenskap aksesseres. For eksempel vil du kanskje formatere et telefonnummer eller sørge for at en dato er gyldig før den returneres.

Eksempel: Skrivebeskyttede egenskaper

Du kan simulere skrivebeskyttede egenskaper ved å kaste en feil når noen forsøker å aksessere en egenskap som ikke skal leses direkte.

            const config = {
  apiKey: 'secret_key'
};

const validator = {
  get: function(target, property) {
    if (property === 'apiKey') {
      throw new Error('Cannot directly access apiKey. Use a secure method.');
    }
    return target[property];
  }
};

const proxy = new Proxy(config, validator);

try {
  console.log(proxy.apiKey); // Kaster Error
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

Denne tilnærmingen forhindrer direkte tilgang til sensitive data, og tvinger utviklere til å bruke en mer kontrollert metode for å hente nøkkelen (f.eks. en funksjon som håndterer autentisering).

Validering av funksjonskall med apply-handleren

apply-handleren lar deg avskjære funksjonskall og validere argumentene som sendes til funksjonen. Dette er spesielt nyttig for å sikre at funksjoner mottar riktige typer og antall argumenter.

Eksempel: Argumenttypevalidering

La oss lage en Proxy som validerer argumentene som sendes til en funksjon som beregner arealet av et rektangel.

            function calculateArea(width, height) {
  return width * height;
}

const validator = {
  apply: function(target, thisArg, argumentsList) {
    if (argumentsList.length !== 2) {
      throw new Error('calculateArea krever nøyaktig to argumenter: width og height.');
    }

    const width = argumentsList[0];
    const height = argumentsList[1];

    if (typeof width !== 'number' || typeof height !== 'number') {
      throw new TypeError('Width og height må være tall.');
    }

    if (width <= 0 || height <= 0) {
      throw new RangeError('Width og height må være positive verdier.');
    }

    return target.apply(thisArg, argumentsList);
  }
};

const proxy = new Proxy(calculateArea, validator);

console.log(proxy(5, 10)); // Utdata: 50

try {
  console.log(proxy(5)); // Kaster Error
} catch (e) {
  console.error(e);
}

try {
  console.log(proxy('5', 10)); // Kaster TypeError
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

I dette eksemplet sjekker apply-handleren antall og typer av argumentene som sendes til calculateArea-funksjonen. Hvis argumentene er ugyldige, kaster den en feil før funksjonen faktisk blir utført. Den avgjørende linjen `return target.apply(thisArg, argumentsList);` utfører faktisk den originale funksjonen med de angitte argumentene.

Validering av objektkonstruksjon med construct-handleren

construct-handleren lar deg avskjære new-operatoren og validere argumentene som sendes til konstruktorfunksjonen. Dette er spesielt nyttig for å håndheve begrensninger på objekter som opprettes ved hjelp av konstruktorer.

Eksempel: Påkrevde egenskaper

La oss lage en Proxy som sikrer at et User-objekt alltid opprettes med et username og email.

            class User {
  constructor(username, email) {
    this.username = username;
    this.email = email;
  }
}

const validator = {
  construct: function(target, argumentsList) {
    if (argumentsList.length !== 2) {
      throw new Error('User-konstruktøren krever to argumenter: username og email.');
    }

    const username = argumentsList[0];
    const email = argumentsList[1];

    if (typeof username !== 'string' || username.length === 0) {
      throw new TypeError('Brukernavn må være en ikke-tom streng.');
    }

    if (typeof email !== 'string' || !email.includes('@')) {
      throw new TypeError('E-post må være en gyldig e-postadresse.');
    }

    return new target(...argumentsList);
  }
};

const UserProxy = new Proxy(User, validator);

const user1 = new UserProxy('john.doe', 'john.doe@example.com'); // Fungerer fint

try {
  const user2 = new UserProxy('john.doe'); // Kaster Error
} catch (e) {
  console.error(e);
}

try {
  const user3 = new UserProxy('john.doe', 'invalid_email'); // Kaster TypeError
} catch (e) {
  console.error(e);
}

console.log(user1);

            

              
                Copy
              
            
          

I dette eksemplet sjekker construct-handleren antall og typer av argumentene som sendes til User-konstruktøren. Hvis argumentene er ugyldige, kaster den en feil før objektet opprettes. Linjen `return new target(...argumentsList);` oppretter faktisk en ny instans av klassen ved hjelp av de angitte argumentene.

Avanserte valideringsteknikker

Utover grunnleggende typesjekking og områdevalidering kan Proxies brukes for mer avanserte valideringsscenarier.

Kryss-egenskapsvalidering

Du kan bruke Proxies til å validere relasjoner mellom ulike egenskaper. For eksempel vil du kanskje sikre at en startdato alltid er før en sluttdato.

            const event = {
  startDate: '2024-01-15',
  endDate: '2024-01-20'
};

const validator = {
  set: function(target, property, value) {
    target[property] = value; // Sett verdien først

    if (property === 'endDate' && target.startDate > target.endDate) {
      throw new Error('Sluttdato må være etter startdato.');
    }

    return true;
  }
};

const proxy = new Proxy(event, validator);

proxy.endDate = '2024-01-25'; // Fungerer fint

try {
  proxy.endDate = '2024-01-10'; // Kaster Error
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

Asynkron validering

Selv om det er mindre vanlig, kan du bruke Proxies med asynkrone operasjoner for mer komplekse valideringsscenarier. Dette kan innebære å foreta API-kall for å validere data mot eksterne kilder.

Viktig merknad: Asynkrone operasjoner innenfor Proxy-handlere kan være komplekse og bør håndteres forsiktig for å unngå å blokkere hendelsesloopen. Det er ofte bedre å utføre asynkron validering utenfor Proxy-handleren og deretter bruke Proxyen til å håndheve resultatene.

Fordeler med å bruke Proxies for validering

• Sentralisert valideringslogikk: Proxies lar deg sentralisere valideringslogikk på ett sted, noe som gjør det enklere å vedlikeholde og oppdatere.
• Forbedret lesbarhet av kode: Ved å skille valideringslogikk fra kjerneobjektlogikken kan du forbedre lesbarheten og vedlikeholdbarheten av koden din.
• Forbedret typesikkerhet: Proxies bidrar til å håndheve typesikkerhet, noe som reduserer risikoen for feil forårsaket av feil datatyper.
• Fleksibilitet og tilpasning: Proxies gir en høy grad av fleksibilitet, slik at du kan tilpasse valideringsregler for å møte de spesifikke behovene til applikasjonen din.

Begrensninger ved bruk av Proxies

• Ytelseskostnad: Proxies introduserer en liten ytelseskostnad på grunn av avskjæringen av objektoperasjoner. Denne kostnaden er vanligvis neglisjerbar for de fleste applikasjoner, men det er viktig å vurdere i ytelseskritiske scenarier.
• Kompatibilitet: Selv om Proxies støttes i moderne nettlesere og Node.js, støttes de ikke i eldre miljøer. Du må kanskje bruke polyfills for å sikre kompatibilitet med eldre nettlesere.
• Feilsøking: Feilsøking av kode som bruker Proxies kan være litt mer utfordrende på grunn av avskjæringen av objektoperasjoner. Imidlertid gir moderne utviklerverktøy god støtte for feilsøking av Proxies.

Beste praksiser for validering med Proxy Handler

• Hold handlere enkle: Unngå kompleks logikk innenfor Proxy-handlere for å minimere ytelseskostnaden og forbedre lesbarheten.
• Gi klare feilmeldinger: Kast informative feilmeldinger som hjelper utviklere å forstå hvorfor valideringen mislyktes.
• Vurder ytelse: Vær oppmerksom på ytelsespåvirkningen av Proxies, spesielt i ytelseskritiske applikasjoner.
• Bruk med forsiktighet: Ikke overbruk Proxies. Bruk dem strategisk for validering og andre metaprogrammeringsoppgaver der de gir en klar fordel.
• Test grundig: Test grundig din Proxy-baserte valideringslogikk for å sikre at den fungerer som forventet i alle scenarier.

Globale hensyn for validering

Når du utvikler applikasjoner for et globalt publikum, er det viktig å vurdere kulturelle forskjeller og regionale variasjoner når du implementerer valideringsregler. Her er noen viktige hensyn:

• Dato- og klokkeslettformater: Bruk et bibliotek som Moment.js eller date-fns for å håndtere dato- og klokkeslettformater korrekt for ulike lokaler. For eksempel, i USA formateres datoer ofte som MM/DD/ÅÅÅÅ, mens i Europa typisk formateres de som DD/MM/ÅÅÅÅ.
• Nummerformater: Vær oppmerksom på ulike nummerformater, inkludert desimalseparatorer og tusenseparatorer. I noen land brukes komma som desimalseparator, mens i andre brukes punktum.
• Valutaformater: Vis valutabeløp i riktig format for brukerens lokale innstillinger, inkludert passende valutasymbol og desimalpresisjon.
• Adresseformater: Adresseformater varierer betydelig rundt om i verden. Vurder å bruke et bibliotek eller API som støtter internasjonal adressevalidering og formatering.
• Telefonnummerformater: Bruk et bibliotek som støtter internasjonal telefonnummervalidering og formatering for å sikre at telefonnumre er riktig angitt.
• Navneformater: Vær oppmerksom på at navneformater kan variere mellom kulturer. Noen kulturer bruker fornavn etterfulgt av etternavn, mens andre bruker etternavn etterfulgt av fornavn. Dessuten har noen kulturer flere fornavn eller etternavn.
• Tegnsett: Sørg for at applikasjonen din støtter ulike tegnsett og kodinger for å imøtekomme navn, adresser og andre tekstdata på forskjellige språk.
• Kulturell sensitivitet: Vær oppmerksom på kulturelle sensitiviteter når du designer valideringsregler. For eksempel kan visse typer data anses som private eller sensitive i noen kulturer.

Eksempel: Internasjonal telefonnummervalidering

            // Antatt at du bruker et bibliotek som "google-libphonenumber"\n\nimport { parsePhoneNumberFromString, AsYouType } from 'google-libphonenumber';\n\nfunction validatePhoneNumber(phoneNumber, countryCode) {\n  try {\n    const number = parsePhoneNumberFromString(phoneNumber, countryCode);\n    if (number && number.isValid()) {\n      return true;\n    } else {\n      return false;\n    }\n  } catch (error) {\n    return false; // Ugyldig telefonnummerformat\n  }\n}\n\n// Eksempelbruk (Tyskland)\nconst isValidGermanNumber = validatePhoneNumber('+4917612345678', 'DE');\nconsole.log('Er gyldig tysk nummer:', isValidGermanNumber); // Utdata: true\n\n// Eksempelbruk (USA)\nconst isValidUSNumber = validatePhoneNumber('+15551234567', 'US');\nconsole.log('Er gyldig amerikansk nummer:', isValidUSNumber); // Utdata: true\n
            

              
                Copy
              
            
          

Konklusjon

JavaScript Proxies tilbyr en kraftig og fleksibel mekanisme for å implementere valideringslogikk i applikasjonene dine. Ved å utnytte Proxy-handlere kan du håndheve begrensninger og typesikkerhet på objektegenskaper, funksjonsargumenter og objektkonstruksjon, noe som fører til mer robust, vedlikeholdsvennlig og sikker kode. Husk å vurdere ytelsespåvirkningen og kompatibilitetsproblemene når du bruker Proxies, og test alltid valideringslogikken grundig. Ved å følge de beste praksisene som er skissert i dette blogginnlegget, kan du effektivt bruke Proxies til å forbedre kvaliteten og påliteligheten til JavaScript-applikasjonene dine, og betjene et globalt publikum med lokaliserte valideringsstrategier.